<!--
 * @Author: mingyong.g
 * @Date: 2020-06-14 08:42:09
 * @LastEditors: mingyong.g
 * @LastEditTime: 2020-06-14 20:58:06
 * @Description: 异常页面
 * @FilePath: \my_ui\src\my-ui-components\my-abnor-page.vue
-->

<template>
  <view class="content">

    <view class="animation-box">
      <!-- #ifdef H5 -->
      <lottie
        :options="options"
        :height="size"
        :width="size"
      />
      <!-- #endif -->
      <!-- #ifndef H5 -->
      <canvas
        id="canvas"
        canvas-id="canvas"
        type="2d"
        :style="{height:size+'px',width:size*2+'px'}"
      />
      <!-- #endif -->
      <view class="tip">{{ tip }}</view>
      <slot />
    </view>
  </view>
</template>

<script>
	  /**
   * 空页，异常页面组件
   * @description 空页，异常页面组件
   * @tutorial http://www.baidu.com
   * @property {String} color= [primary|plain|gray] 动画颜色
   * @property {String} type = [loading|message|empty|404|search|rocket|ok|auth] 动画样式
	 * @property {String} tip 提示文字
	 * @property {Number} size 动画尺寸
   * @example <my-abnor-page color="primary" type="rocket" :size="100" >此处可以使用插槽</my-abnor-page>
   */
// #ifdef MP-WEIXIN
import lottie_mp from 'lottie-miniprogram';
// #endif

// #ifdef H5
import lottie from 'vue-lottie';
// #endif
export default {
  name: 'MyAbnorPage',
  components: {
    // #ifdef H5
    lottie
    // #endif
  },
  props: {
    type: {
      type: String,
      default: 'loading'
    },
    color: {
      type: String,
      default: 'plain'
    },
    size: {
      type: Number,
      default: 120
    },
    tip: {
      type: String,
      default: '啥也没有'
    }
  },
  data() {
    return {
      options: {
        animationData: require(`./animation/my-${this.color}-${this.type}.json`)
      }
    };
  },
  mounted() {
    // #ifdef MP-WEIXIN
    this.play();
    // #endif
  },
  methods: {
    play() {
      // #ifdef MP-WEIXIN
      uni.createSelectorQuery().in(this).select('#canvas').node(res => {
        const canvas = res.node;
        const context = canvas.getContext('2d');
        lottie_mp.setup(canvas);// 要执行动画，必须调用setup,传入canvas对象

        lottie_mp.loadAnimation({
          loop: true, // 是否循环播放（选填）
          autoplay: true, // 是否自动播放（选填）
          animationData: this.options.animationData,
          rendererSettings: {
            context// es6语法：等同于context:context（必填）
          }
        });
      }).exec();
      // #endif
    }
  }
};
</script>

<style lang="scss">
	page{
		background-color: #efefef;
	}
	.content{
		width: 100vw;
		height: 80vh;
		display: flex;
		align-items: center;
		justify-content: center;
		.animation-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.tip{
				font-size: 15px;
				color: #999;
				margin: 10upx;
				margin-bottom: 30upx;
			}
		}
	}

</style>
